<template>
  <div class="el-card filter-container is-never-shadow">
    <div class="el-card__body">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <button class="el-button el-button--primary el-button--small" @click="searchInput"><span> 查询结果 </span></button>
        <button class="el-button el-button--default el-button--small" @click="clear"><span>重置</span></button>
      </div>
      <!-- 商品列表  查询 -->
      <form style="margin-top: 15px">
        <form class="el-form el-form--inline">
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">输入搜索：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <input type="text" autocomplete="off" placeholder="商品名称" v-model="SearchInput" class="el-input__inner" />
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">商品货号：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <input type="text" autocomplete="off" placeholder="商品货号" class="el-input__inner" />
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">商品分类：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <div class="block">
                  <el-cascader v-model="value" :options="categoryList" :props="categoryProps" @change="handleChange" class="el-input__inner"></el-cascader>
                </div>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">商品品牌：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <div class="block">
                  <template>
                    <el-select v-model="value" placeholder="商品品牌">
                      <el-option v-for="item in brand" :key="item.value" :label="item.name" :value="item.name"> </el-option>
                    </el-select>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">上架状态：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <div class="block">
                  <template>
                    <el-select v-model="value" placeholder="上架状态">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="el-form-item el-form-item--small">
            <label class="el-form-item__label" style="width: 140px">审核状态：</label>
            <div class="el-form-item__content">
              <div class="el-input el-input--small" style="width: 203px">
                <div class="block">
                  <template>
                    <el-select v-model="value" placeholder="审核状态">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </form>
      </form>
    </div>
    <div class="el-card operate-container is-never-shadow">
      <div class="el-card__body">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <button class="btn-add el-button--default el-button--mini">添加</button>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="table-container">
      <el-table :data="goodsList" border style="width: 100%">
        <el-table-column width="60px" align="center" type="selection"> </el-table-column>
        <el-table-column label="编号" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" width="119px" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.pic" alt="" width="80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="520px" align="center">
          <template slot-scope="scope">
            <span>价格：{{ scope.row.name }}</span
            ><br />
            <span>品牌：{{ scope.row.brandName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="130px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span
            ><br />
            <span>货号：{{ scope.row.productSn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="123px" align="center">
          <template slot-scope="scope">
            <div>
              <span>上架: <el-switch v-model="scope.row.newStatus" active-color="#13ce66" inactive-color="#ff4949"> </el-switch></span>
            </div>
            <div>
              <span>新品: <el-switch v-model="scope.row.newStatus" active-color="#13ce66" inactive-color="#ff4949"> </el-switch></span>
            </div>
            <div>
              <span>推荐: <el-switch v-model="scope.row.newStatus" active-color="#13ce66" inactive-color="#ff4949"> </el-switch></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="70px" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sort }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="SKU库存" width="100px" align="center">
          <template slot-scope="scope">
            <el-row>
              <el-button
                class="btn-icon"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                style="float: left; margin-left: 20px; border-radius: 50%; width: 35px; height: 35px"
                circle
                @click="userIcon(scope.row)"
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="60px" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sale }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="100px" align="center">
          <div>未审核</div>
          <div style="color: #66b1ff">审核详情</div>
        </el-table-column>
        <el-table-column label="操作" width="164px" align="center">
          <template slot-scope="scope">
            <div style="margin: 10px 5px; height: 30px">
              <el-button style="float: left" size="mini">查看</el-button>
              <el-button style="float: right" size="mini">日志</el-button>
            </div>
            <div style="margin: 10px 5px; height: 30px">
              <el-button style="float: left" size="mini">编辑</el-button>
              <el-button type="danger" style="float: right; color: #fff; margin-right: 15px" size="mini" @click="open(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="编辑货品信息" :data="DataOne" :visible.sync="dialogVisible" width="40%">
      <span>商品货号：{{ DataOne.productSn }}</span>
      <el-input style="width: 50%; margin-left: 30px" placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <template>
        <el-table :data="DataOneList" border style="width: 100%">
          <el-table-column prop="date" label="SKU编号" align="center">
            <template slot-scope="scope">
              <el-input type="text" :value="scope.row.skuCode" size="mini" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="颜色" align="center">
            <template slot-scope="scope">
              <span>{{ JSON.parse(scope.row.spData)[0].value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="容量" align="center">
            <template slot-scope="scope">
              <span>{{ JSON.parse(scope.row.spData)[1].value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="销售价格">
            <template slot-scope="scope">
              <el-input type="text" :value="scope.row.price" size="mini" />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="商品库存">
            <template slot-scope="scope">
              <el-input type="text" :value="scope.row.stock" size="mini" />
            </template>
          </el-table-column>
          <el-table-column label="库存预警值">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.stock1" size="mini" />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->
    <!-- 分页 -->
    <div class="block" style="float: right; margin-top: 20px">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { fetchGoodsBrand, fetchGoodsClassification, fetchGoodsList, fetchGoodsSearch, fetchGoodsSKU } from '@/api/api'
export default {
  data() {
    return {
      // 查询搜索
      SearchInput: '',
      // 分页 总条数
      pageInfo: {
        // 每页多少条
        pageSize: 0,
        // 当前页
        currentPage: null,
        // 总条数
        total: 0,
      },
      currentPage4: 5,
      // 库存
      stock: '',
      // 查询商品
      input3: '',
      // 单条商品所有数据
      DataOneList: [],
      // 单条商品数据
      DataOne: '',
      // 弹窗
      dialogVisible: false,
      // 状态
      value: [],
      // 商品列表
      goodsList: [],
      // 添加用户表单的状态
      dialogFormVisible: false,
      // 商品列表 表头
      tableName: [
        { name: '编号', widths: '100px' },
        { name: '商品图片', widths: '119px' },
        { name: '商品名称', widths: '500px' },
        { name: '价格/货号', widths: '120px' },
        { name: '标签', widths: '124px' },
        { name: '排序', widths: '100px' },
        { name: 'SKU库存', widths: '100px' },
        { name: '销量', widths: '100px' },
        { name: '审核状态', widths: '100px' },
        { name: '操作', widths: '104px' },
      ],
      // 商品分类 input  格式化
      categoryProps: {
        value: 'name',
        label: 'name',
        children: 'productAttributeList',
        expandTrigger: 'click',
      },
      // 商品分类 input
      categoryList: [],
      // 商品品牌 input
      brand: [],
      options: [
        {
          value: 'cascader',
          label: '上架',
        },
        {
          value: 'cascader1',
          label: '下架',
        },
      ],
    }
  },
  methods: {
    // 删除按钮弹窗
    open(id) {
      this.$confirm('是否将要进行删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.goodsList = this.goodsList.filter((item) => item.id !== id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 查询 搜索
    searchInput() {
      fetchGoodsSearch().then((res) => {
        this.goodsList = res.data.filter((item) => {
          return item.name.indexOf(this.SearchInput) != -1
        })
      })
    },
    // 查询重置
    clear() {
      this.SearchInput = ''
      this.categoryList = []
    },
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      fetchGoodsList(this.pageInfo.currentPage, 5).then((res) => {
        this.goodsList = res.data.list
      })
    },
    statesClick(state) {
      this.states = state
    },
    handleChange(value) {
      console.log(value)
    },
    userIcon(data) {
      this.DataOne = data
      this.dialogVisible = true
      fetchGoodsSKU(data.id).then((res) => {
        this.DataOneList = res.data
      })
    },
  },
  created() {
    fetchGoodsList(this.pageInfo.currentPage, 5).then((res) => {
      this.pageInfo.total = res.data.total
      this.goodsList = res.data.list
    })
    fetchGoodsClassification().then((res) => {
      this.categoryList = res.data
    })
    fetchGoodsBrand().then((res) => {
      this.brand = res.data
    })
  },
}
</script>

<style lang="scss" scoped>
.el-table-column {
  text-align: center;
}
.has-gutter {
  text-align: center !important;
}
.cell {
  text-align: center !important;
}
.checkbox_input {
  margin-left: 25px;
  margin-top: 20px;
}
.checkbox_div {
  width: 60px;
  padding: 12px 0;
  border-right: 1px solid #ebeef5;
  float: left;
}
.table-container {
  margin-top: 20px;
  border: 1px solid #ebeef5;
}
.btn-add {
  border: 1px solid #dcdfe6;
  background: #fff;
}
.el-card__body {
  border: 1px solid #ebeef5;
}
.el-card {
  border: none;
}
.operate-container {
  margin-top: 20px;
}

.el-cascader {
  border: none !important;
}
.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 32px;
}
.el-form-item__content:after,
.el-form-item__content:before {
  display: table;
  content: '';
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.el-button--primary {
  float: right;
}
.el-button--default {
  float: right;
  margin-right: 15px !important;
}
.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.el-button--mini,
.el-button--small {
  font-size: 12px;
  border-radius: 3px;
}
.el-button--small,
.el-button--small.is-round {
  padding: 9px 15px;
}
::v-deep .el-dialog__footer {
  height: 60px !important;
}
::v-deep .el-button {
  padding: 9px 12px;
}
</style>
